
<script>
export default {
  name: "Login",
  data() {
    return {
      captchaUrl: "",
      loginForm: {
        username: "",
        password: "",
      },
      checked: true,
      form: {
        //表单数据
        categoryId: "", //分类编号
        bookName: "", //书名
        subTitle: "", //子标题
        author: "", //作者
        description: "", //描述
      },

      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 5,
            max: 14,
            message: "长度在 5 到 14 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          ,
          { min: 6, message: "密码长度要大于6", trigger: "blur" },
        ],
      },
      dialogFormVisible: true, //控制表单是否显示
      dialogModel: "create", //表单提交模式 create-新增,update-修改
      dialogTitle: "", //表单标题
      rules: {
        //校验规则
        bookName: [{ required: true, message: "请输入书名", trigger: "blur" }],
        subTitle: [
          { required: true, message: "请输入子标题", trigger: "blur" },
        ],
        author: [{ required: true, message: "请输入作者", trigger: "blur" }],
      },
    };
  },
  methods: {
    showDialog(model, data) {
      this.dialogModel = model;
      if (model == "create") {
        this.dialogTitle = "新增图书";
        this.form.categoryId = "1";
        this.form.bookName = "";
        this.form.subTitle = "";
        this.form.author = "";
        this.form.description = "";
        this.dialogFormVisible = true;
      } else if (model == "update") {
        if (data != null) {
          this.dialogTitle = "更新图书";
          this.form = data;
          this.form.categoryId = this.form.categoryId.toString();
          this.dialogFormVisible = true;
        }
      }
    },
    returnWelcome() {
      this.$router.push("/welcome");
    },
    rigster() {
      this.showDialog("create", null);
    },
    submitLogin() {
      this.$axios
        .get("http://localhost:8888/users/login", {
          params: {
            username: this.loginForm.username,
            password: this.loginForm.password,
          },
        })
        .then((response) => {
          sessionStorage.setItem("username", this.loginForm.username);
          if (response.data.status == 10000) {
            this.$message({
              message: "登录成功",
              type: "success",
            });
            this.$router.push("/Home");
          } else {
            console.log(response.data.msg);
            this.$message.error({
              type: "error",
              message: response.data.msg,
            });
          }
        });
    },
    reset() {
      this.loginForm.username = "";
      this.loginForm.password = "";
      this.$message.success({
        type: "success",
        message: "重置成功",
      });
    },
  },
};
</script>

<template>
  <!--  <h1>欢迎来到登录页面</h1>-->
  <div class="body">
    <el-form
      :rules="rules"
      ref="loginForm"
      :model="loginForm"
      class="loginContainer"
    >
      <h3 class="loginTitle">欢迎登录</h3>
      <el-form ref="loginFormRef">
        <el-form-item prop="username">
          <el-input
            type="text"
            v-model="loginForm.username"
            placeholder="亲，请输入用户名"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="loginForm.password"
            placeholder="亲，请输入密码"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <el-checkbox v-model="checked" class="loginRemember">记住我</el-checkbox>

      <el-button type="primary" class="resetButton" @click="reset"
        >重置</el-button
      >
      <el-button type="primary" class="returnWelcome" @click="returnWelcome"
        >返回主页面</el-button
      >
      <el-button type="primary" class="register" @click="rigster"
        >注册</el-button
      >
      <el-button type="primary" style="width: 95%" @click="submitLogin"
        >登录</el-button
      >
    </el-form>
  </div>

  <el-dialog
    :title="dialogTitle"
    v-model="dialogFormVisible"
    width="800px"
    top="5vh"
    center
  >
    <div class="info">
      <el-form :model="form" ref="bookForm" :rules="rules">
        <!-- 类别下拉框 -->
        <el-form-item prop="category" label-width="0px">
          <el-select
            v-model="form.categoryId"
            placeholder="请选择类型"
            style="width: 100%"
          >
            <el-option label="前端" value="1"></el-option>
            <el-option label="后端" value="2"></el-option>
            <el-option label="测试" value="3"></el-option>
            <el-option label="产品" value="4"></el-option>
          </el-select>
        </el-form-item>
        <!-- 书名 -->
        <el-form-item prop="bookName" label-width="0px">
          <el-input
            v-model="form.bookName"
            placeholder="请输入书名"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- 子标题 -->
        <el-form-item prop="subTitle" label-width="0px">
          <el-input
            v-model="form.subTitle"
            placeholder="请输入子标题"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- 作者 -->
        <el-form-item prop="author" label-width="0px">
          <el-input
            v-model="form.author"
            placeholder="请输入作者"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- wangEditor容器 -->
        <div ref="editor" style="width: 100%"></div>
      </el-form>
      <span class="dialog-footer">
        <!-- 提交按钮 -->
        <el-button
          type="primary"
          v-on:click="onSubmit('bookForm')"
          style="width: 100%"
          >确认提交</el-button
        >
      </span>
    </div>
  </el-dialog>
</template>
<style lang="less" scoped>
.register {
  width: 35%;
  margin: 5px 20px 10px 20px;
  float: right;
}
.resetButton {
  width: 20%;
  margin: 6px 15px 15px 200px;
}
.returnWelcome {
  width: 30%;
  margin: 5px 20px 10px 20px;
}
.loginContainer {
  border-radius: 15px;
  background-clip: padding-box;
  text-align: left;
  margin: auto;
  margin-top: 180px;
  width: 350px;
  padding: 15px 35px 15px 35px;
  background: aliceblue;
  border: 1px solid blueviolet;
  box-shadow: 0 0 25px #f885ff;
}
.loginTitle {
  margin: 0px auto 48px auto;
  text-align: center;
  font-size: 40px;
}
.loginRemember {
  text-align: left;
  margin: 0px 0px 15px 0px;
}
.body {
  width: 100vw;
  height: 100vh;
  background-image: url("../assets/background.jpg");
  background-size: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
</style>








